<template>
    <div>
        <div class="row">
            <div style="width: 100%">
                <span class="level-title">等级信息</span>
                <hr>
            </div>
            <div style="width: 90%;margin: 0 auto">
                <div class="info-list">
                    <div class="info-div">
                        <div class="info-top">
                            当前等级：<span :class="textColorClass">LV{{expInfo.level}}</span>
                            <br>
                            <br>
                            当前经验值：<span :class="textColorClass">{{expInfo.exp}}/{{expInfo.maxExp}}</span>
                        </div>

                        <div class="info-center">

                            <div class="progress-div">
                                <div class="progress" style="width: 100%;height: 20px;margin: 0 auto">
                                    <div :class="barColorClass" class="progress-bar-animated progress-bar progress-bar-striped" role="progressbar" :style="{width: expInfo.percent + '%'}" :aria-valuenow="expInfo.percent" aria-valuemin="0" aria-valuemax="100">{{parseFloat(expInfo.percent).toFixed(2)}}%</div>
                                </div>
                            </div>

                        </div>

                        <div class="info-bottom">
                            距离下一等级：<span :class="textColorClass">{{expInfo.maxExp-expInfo.exp}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="margin-top: 20px">
            <div style="width: 95%">
                <i class="fa fa-search"></i>&nbsp;
                <span class="exp-title">如何获取经验？</span>
                <hr>
                <p>
                    新注册的用户经验从0开始累计，
                    <span v-for="(o,i) in sysExpDetailList">
                        <span v-if="o.once === YES_NO.NO.key">通过</span>
                        <span v-if="o.once === YES_NO.YES.key">首次</span>
                        <span class="text-secondary">{{EXP_TYPE | optionKV(o.expType)}}</span>
                        <span v-if="o.once === YES_NO.NO.key">方式</span>可获得
                        <span class="emphasize text-info">{{o.expValue}}</span>
                        点经验
                        <span v-if="o.once === YES_NO.NO.key">
                            ，每日上限
                            <span class="emphasize text-danger">{{o.expMaxValue}}</span>
                            点
                        </span>

                        <span v-if="i < sysExpDetailList.length - 1">；</span>
                    </span>。
                </p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Level",
        data:function () {
            return {
                loginUser: {},
                expInfo: {},

                sysExpDetailList: [],
                EXP_TYPE: EXP_TYPE,
                YES_NO: YES_NO,
            }
        },
        computed:{
            barColorClass(){
                return {
                    'bg-secondary': this.expInfo.level === 1,
                    'bg-purple': this.expInfo.level === 2,
                    'bg-primary': this.expInfo.level === 3,
                    'bg-info': this.expInfo.level === 4,
                    'bg-success': this.expInfo.level === 5,
                    'bg-warning': this.expInfo.level === 6,
                    'bg-danger': this.expInfo.level >= 7
                }
            },
            textColorClass(){
                return {
                    'text-secondary level-font': this.expInfo.level === 1,
                    'text-purple level-font': this.expInfo.level === 2,
                    'text-primary level-font': this.expInfo.level === 3,
                    'text-info level-font': this.expInfo.level === 4,
                    'text-success level-font': this.expInfo.level === 5,
                    'text-warning level-font': this.expInfo.level === 6,
                    'text-danger level-font': this.expInfo.level >= 7
                }
            }
        },
        mounted() {
            let _this = this;

            _this.loginUser = Tool.getLoginUser();

            _this.getExpAndLevel(_this.loginUser.id);

            _this.loadSysExpDetail();
        },
        methods:{
            loadSysExpDetail(){
                let _this = this;
                _this.$ajax.get(process.env.VUE_APP_SERVER + '/user/exp/sys/load-exp-detail').then(response=>{
                    let resp = response.data;
                    if(resp.success){
                        _this.sysExpDetailList = resp.content;
                    }
                })
            },
            getExpAndLevel(id){
                let _this = this;
                _this.$ajax.get(process.env.VUE_APP_SERVER + '/user/exp/get-user-exp/' + id).then(response=>{
                    let resp = response.data;
                    if(resp.success){
                        let expInfo = resp.content;
                        _this.expInfo = expInfo;
                        let percent = (expInfo.exp - expInfo.lastMaxExp) / (expInfo.maxExp - expInfo.lastMaxExp) * 100;
                        _this.expInfo.percent = percent;
                    }
                })
            },
        }
    }
</script>

<style scoped>
    .level-title{
        font-size: 25px;
        font-weight: bold;
    }
    .exp-title{
        font-size: 20px;
    }
    .progress-div{
        width: 100%;
    }
    .info-top, .info-bottom{
        width: 100%;
        height: auto;
        line-height:18px;
        font-size: 16px;
        margin-bottom: 20px;
    }
    .info-bottom{
        margin-top: 10px;
        text-align: right;
    }
    .info-list{
        background-color: rgba(20,120,220,0.1);
        border-radius: 15%;
        padding: 15px;
        border: 1px dashed #86cfda;
    }
    .info-center{
        width: 100%;
        height: 30px;
        display: flex;
        line-height: 20px;
    }
    .bg-purple{
        background-color: rgba(174,50,255,0.43);
    }
    .level-font{
        font-size: 18px;
    }
    .text-purple{
        color: rgba(174,50,255,0.43);
    }
    p{
        line-height: 30px;
        text-indent: 2em;
    }
    .emphasize{
        font-size: 20px;
        font-weight: bold;
    }
</style>